import React from 'react';
import { Card, Row, Col, Space, Button, Input, Table, Tag, Statistic } from 'antd';

const SystemLogs: React.FC = () => {
  return (
    <div className="p-6">
      <Card title="系统日志" className="mb-6">
        <div className="flex justify-between mb-4">
          <Space>
            <Button icon={<i className="fas fa-filter"/>} className="!rounded-button whitespace-nowrap">过滤</Button>
            <Button icon={<i className="fas fa-download"/>} className="!rounded-button whitespace-nowrap">导出</Button>
            <Button icon={<i className="fas fa-trash"/>} className="!rounded-button whitespace-nowrap">清空</Button>
          </Space>
          <Space>
            <Input.Search placeholder="搜索日志..." style={{ width: 250 }} />
          </Space>
        </div>
        <Table
          dataSource={[
            {
              key: '1',
              time: '2024-01-20 10:30:25',
              level: 'INFO',
              module: '网络控制',
              message: '系统启动完成，网络拓扑初始化成功',
            },
            {
              key: '2',
              time: '2024-01-20 10:30:28',
              level: 'INFO',
              module: '无人机控制',
              message: '无人机节点 Node-001 已连接',
            },
            {
              key: '3',
              time: '2024-01-20 10:31:15',
              level: 'WARNING',
              module: '网络监控',
              message: 'Node-003 响应超时，正在重试连接',
            },
            {
              key: '4',
              time: '2024-01-20 10:31:45',
              level: 'ERROR',
              module: '网络监控',
              message: 'Node-003 连接失败，节点可能离线',
            },
            {
              key: '5',
              time: '2024-01-20 10:32:10',
              level: 'INFO',
              module: '系统配置',
              message: '网络参数更新：传输功率调整为 20dBm',
            }
          ]}
          columns={[
            {
              title: '时间',
              dataIndex: 'time',
              key: 'time',
              width: 180,
            },
            {
              title: '级别',
              dataIndex: 'level',
              key: 'level',
              width: 100,
              render: (level: string) => (
                <Tag color={
                  level === 'ERROR' ? 'error' :
                  level === 'WARNING' ? 'warning' :
                  'success'
                }>
                  {level}
                </Tag>
              ),
            },
            {
              title: '模块',
              dataIndex: 'module',
              key: 'module',
              width: 120,
            },
            {
              title: '日志内容',
              dataIndex: 'message',
              key: 'message',
            },
          ]}
          pagination={{
            total: 50,
            pageSize: 10,
          }}
        />
      </Card>
      <Row gutter={[16, 16]}>
        <Col span={12}>
          <Card title="日志统计" className="h-[400px]">
            <div className="flex items-center justify-around h-full">
              <Statistic title="总日志数" value={1234} prefix={<i className="fas fa-clipboard-list"/>} />
              <Statistic title="今日新增" value={89} prefix={<i className="fas fa-plus-circle"/>} />
              <Statistic title="错误日志" value={12} prefix={<i className="fas fa-exclamation-circle"/>} />
              <Statistic title="警告日志" value={45} prefix={<i className="fas fa-exclamation-triangle"/>} />
            </div>
          </Card>
        </Col>
        <Col span={12}>
          <Card title="系统性能" className="h-[400px]">
            <Row gutter={[16, 16]} className="h-full items-center">
              <Col span={8}>
                <Statistic title="CPU使用率" value={32} suffix="%" prefix={<i className="fas fa-microchip"/>} />
              </Col>
              <Col span={8}>
                <Statistic title="内存使用率" value={45} suffix="%" prefix={<i className="fas fa-memory"/>} />
              </Col>
              <Col span={8}>
                <Statistic title="磁盘使用率" value={28} suffix="%" prefix={<i className="fas fa-hdd"/>} />
              </Col>
            </Row>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default SystemLogs; 